<template>
  <div class="hx-top-bar">
    <!-- title-logo -->
    <div class="logo">
      <h1>
        <a href="">极贝支付中心</a>
      </h1>
    </div>

    <!-- 登录样式 -->
    <el-popover placement="bottom" width="250" trigger="hover">
      <div class="user-count-login">
        <div class="logout">
          <button type="button" class="btn" @click="out">
            <img src="@/assets/images/exit-icon.png" alt="" class="icon">
            退出登录
          </button>
        </div>
      </div>
      <div class="acont-no-login" slot="reference" v-show="isLogin">
        <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" font-size="20" class="antd-mobile-icon"
          style="vertical-align: -0.125em;">
          <g id="UserOutline-UserOutline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="UserOutline-编组">
              <rect id="UserOutline-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
              <path
                d="M24.5,4 C30.0112644,4 34.479027,8.46775399 34.479027,13.9790078 L34.479027,18.0209922 C34.479027,21.7144498 32.4724515,24.9392476 29.4899594,26.6647285 L29.4895135,27 L40.4649873,32.8658886 C42.8766161,34.1547938 44.2604463,36.7822067 43.9591026,39.5 C43.6750656,42.0617054 41.5099747,44 38.9325658,44 L10.0674342,44 C7.49002529,44 5.32493441,42.0617054 5.04089744,39.5 C4.73955374,36.7822067 6.12338392,34.1547938 8.53501271,32.8658886 L19.5104865,27 L19.5100406,26.6647285 C16.5275485,24.9392476 14.520973,21.7144498 14.520973,18.0209922 L14.520973,13.9790078 C14.520973,8.46775399 18.9887356,4 24.5,4 Z M24.5,7 C20.7258932,7 17.6514878,9.9957724 17.5250256,13.7390798 L17.5209788,13.9790078 L17.5209788,18.0209922 C17.5209788,20.4528116 18.7728519,22.6635411 20.7856095,23.9310701 L21.0123556,24.0679885 L22.3083607,24.817775 C22.4317831,24.8891793 22.5078628,25.0208861 22.5080524,25.1634751 L22.5125654,28.5568164 C22.512762,28.7046068 22.4314515,28.8404631 22.3011089,28.9101252 L9.94909066,35.5117138 L9.94909066,35.5117138 C8.6194532,36.2223442 7.85648652,37.670953 8.0226306,39.1693924 C8.13239999,40.1593932 8.93277672,40.9205158 9.91149276,40.9941531 L10.0674342,41 L38.9325658,41 C39.9810601,41 40.8618227,40.2114985 40.9773694,39.1693924 C41.1359615,37.7390639 40.4479878,36.3541389 39.2286771,35.6131276 L39.0509093,35.5117138 L26.6988911,28.9101252 C26.5685485,28.8404631 26.487238,28.7046068 26.4874346,28.5568164 L26.4919476,25.1634751 C26.4921372,25.0208861 26.5682169,24.8891793 26.6916393,24.817775 L27.9876444,24.0679885 L27.9876444,24.0679885 C30.0560904,22.8713167 31.3818366,20.7046996 31.4738944,18.2902478 L31.4790212,18.0209922 L31.4790212,13.9790078 C31.4790212,10.1246082 28.354407,7 24.5,7 Z"
                id="UserOutline-形状结合" fill="currentColor" fill-rule="nonzero"></path>
            </g>
          </g>
        </svg>
        <span class="name">账号</span>
        <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" font-size="10" class="antd-mobile-icon"
          style="vertical-align: -0.125em;">
          <g id="DownOutline-DownOutline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g>
              <rect id="DownOutline-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
              <path
                d="M5.11219264,16.3947957 L22.6612572,34.5767382 L22.6612572,34.5767382 C23.2125856,35.1304785 24.0863155,35.1630514 24.6755735,34.6744571 L24.7825775,34.5767382 L42.8834676,16.3956061 C42.9580998,16.320643 43,16.2191697 43,16.1133896 L43,12.9866673 C43,12.7657534 42.8209139,12.5866673 42.6,12.5866673 C42.4936115,12.5866673 42.391606,12.6290496 42.316542,12.7044413 L23.7816937,31.3201933 L23.7816937,31.3201933 L5.6866816,12.7237117 C5.53262122,12.5653818 5.27937888,12.5619207 5.121049,12.7159811 C5.04365775,12.7912854 5,12.8946805 5,13.0026627 L5,16.1170064 C5,16.2206403 5.04022164,16.3202292 5.11219264,16.3947957 Z"
                id="DownOutline-down" fill="currentColor" fill-rule="nonzero"></path>
            </g>
          </g>
        </svg>
      </div>
    </el-popover>


    <!-- 未登录的样式 -->
    <div class="acont-no-login" v-show="!isLogin" @click="open">
      <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" font-size="20" class="antd-mobile-icon"
        style="vertical-align: -0.125em;">
        <g id="UserOutline-UserOutline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="UserOutline-编组">
            <rect id="UserOutline-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
            <path
              d="M24.5,4 C30.0112644,4 34.479027,8.46775399 34.479027,13.9790078 L34.479027,18.0209922 C34.479027,21.7144498 32.4724515,24.9392476 29.4899594,26.6647285 L29.4895135,27 L40.4649873,32.8658886 C42.8766161,34.1547938 44.2604463,36.7822067 43.9591026,39.5 C43.6750656,42.0617054 41.5099747,44 38.9325658,44 L10.0674342,44 C7.49002529,44 5.32493441,42.0617054 5.04089744,39.5 C4.73955374,36.7822067 6.12338392,34.1547938 8.53501271,32.8658886 L19.5104865,27 L19.5100406,26.6647285 C16.5275485,24.9392476 14.520973,21.7144498 14.520973,18.0209922 L14.520973,13.9790078 C14.520973,8.46775399 18.9887356,4 24.5,4 Z M24.5,7 C20.7258932,7 17.6514878,9.9957724 17.5250256,13.7390798 L17.5209788,13.9790078 L17.5209788,18.0209922 C17.5209788,20.4528116 18.7728519,22.6635411 20.7856095,23.9310701 L21.0123556,24.0679885 L22.3083607,24.817775 C22.4317831,24.8891793 22.5078628,25.0208861 22.5080524,25.1634751 L22.5125654,28.5568164 C22.512762,28.7046068 22.4314515,28.8404631 22.3011089,28.9101252 L9.94909066,35.5117138 L9.94909066,35.5117138 C8.6194532,36.2223442 7.85648652,37.670953 8.0226306,39.1693924 C8.13239999,40.1593932 8.93277672,40.9205158 9.91149276,40.9941531 L10.0674342,41 L38.9325658,41 C39.9810601,41 40.8618227,40.2114985 40.9773694,39.1693924 C41.1359615,37.7390639 40.4479878,36.3541389 39.2286771,35.6131276 L39.0509093,35.5117138 L26.6988911,28.9101252 C26.5685485,28.8404631 26.487238,28.7046068 26.4874346,28.5568164 L26.4919476,25.1634751 C26.4921372,25.0208861 26.5682169,24.8891793 26.6916393,24.817775 L27.9876444,24.0679885 L27.9876444,24.0679885 C30.0560904,22.8713167 31.3818366,20.7046996 31.4738944,18.2902478 L31.4790212,18.0209922 L31.4790212,13.9790078 C31.4790212,10.1246082 28.354407,7 24.5,7 Z"
              id="UserOutline-形状结合" fill="currentColor" fill-rule="nonzero"></path>
          </g>
        </g>
      </svg>
      <span class="name">登录</span>
      <svg width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" font-size="10" class="antd-mobile-icon"
        style="vertical-align: -0.125em;">
        <g id="DownOutline-DownOutline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g>
            <rect id="DownOutline-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
            <path
              d="M5.11219264,16.3947957 L22.6612572,34.5767382 L22.6612572,34.5767382 C23.2125856,35.1304785 24.0863155,35.1630514 24.6755735,34.6744571 L24.7825775,34.5767382 L42.8834676,16.3956061 C42.9580998,16.320643 43,16.2191697 43,16.1133896 L43,12.9866673 C43,12.7657534 42.8209139,12.5866673 42.6,12.5866673 C42.4936115,12.5866673 42.391606,12.6290496 42.316542,12.7044413 L23.7816937,31.3201933 L23.7816937,31.3201933 L5.6866816,12.7237117 C5.53262122,12.5653818 5.27937888,12.5619207 5.121049,12.7159811 C5.04365775,12.7912854 5,12.8946805 5,13.0026627 L5,16.1170064 C5,16.2206403 5.04022164,16.3202292 5.11219264,16.3947957 Z"
              id="DownOutline-down" fill="currentColor" fill-rule="nonzero"></path>
          </g>
        </g>
      </svg>
    </div>




  </div>
</template>
<script>
export default {
  name: "topBar",
  props: ['isLogin'],
  data() {
    return {

    }
  },
  methods: {
    out() {
      this.$emit('loginOut')
    },
    open() {
      console.log('111');
      this.$emit('openLogin')
    }
  }
}
</script>
<style lang="scss">
.hx-top-bar {
  width: 100%;
  height: 80px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
  position: fixed;
  z-index: 1000;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);

  .logo {
    background: url('~@/assets/images/title-logo.png') no-repeat center / 100%;
    width: 198px;
    height: 45px;

    h1 {
      text-indent: -9999px;
    }
  }

  .acont-no-login {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    -webkit-margin-start: 20px;
    margin-inline-start: 20px;
    -webkit-margin-end: 20px;
    margin-inline-end: 20px;

    .name {
      margin: 0 6px;
    }
  }

}

.user-count-login {
  .logout {
    .btn {
      display: flex;
      width: 100%;
      // padding: 16px 0;
      align-items: center;
      justify-content: center;
      color: #333;
      background-color: #fff;
      border: 0;
      cursor: pointer;

      .icon {
        width: 14px;
        height: 14px;
        -webkit-margin-end: 10px;
        margin-inline-end: 10px;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
  }
}

// 移动端样式调整
.mobile-body {
  .hx-top-bar {
    height: 70px;
    padding: 0 15px;

    .logo {
      background: url('~@/assets/images/title-mobile-logo.png') no-repeat center / 100%;
      width: 160px;
      height: 34px;
    }

    .acont-no-login {
      -webkit-margin-start: 0px;
      margin-inline-start: 0px;
      -webkit-margin-end: 10px;
      margin-inline-end: 10px;
    }
  }
}
</style>